<template>
	<view class="page-content">
		<view class="n_title">{{title}}</view>
		<view class="content-content">
			<view class="uni-row1 tab-view">
				<view :class="status!='0'? 'tab tab-act' : 'tab'" @click="tab('1')" style="font-size: 14px;">全部</view>
				<view :class="status=='0'? 'tab tab-act' : 'tab'" @click="tab('0')" style="font-size: 14px;">未处理</view>
			</view>
			<view>
				<scroll-view scroll-y="true" @scrolltolower="getNextPage" class="scroll-view">
					<view v-for="(d,dix) in page.records" class="uni-row1 d-pannel t10" :key="'d'+dix" @click="detail(d)">
						<view class="data-item">
							<view class="deviceName">{{d.deviceName}}</view>
							<view>{{d.waringName}}</view>
							<view>{{d.regionName}}</view>
						</view>
						<view class="data-item data-item-deal">
							<view style="height: 30px;line-height: 30px;"><span class="btn4">故障</span></view>
							<view class="data-item-last">{{d.waringTimeLatest}}</view>
							<view>
								<view class="data-item-last" v-if="d.status=='0'">未确认</view>
								<view class="data-item-last" v-if="d.status=='1' && d.resStatus=='1'"  >处理中</view>
								<view class="data-item-last" v-if="d.status=='1' && d.resStatus=='2'"  >已经完成</view>
								<view class="data-item-last" v-if="d.status=='2'">误报</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '应急响应',
				status:null,
				page:{
					current:1,
					pages:null,
					records:[]
				}
			}
		},
		onShow(){
			this.status=null
			this.tab(null)
		},

		onLoad() {
			
		},
		methods: {
			tab(status){
				this.status = status=='0'?status:null
				this.page = {
					current:1,
					pages:null,
					records:[]
				}
				this.getData()
			},
			getNextPage(){
				if (!this.page.pages){
					return
				}
				if (this.page.current>=this.page.pages){
					return
				}
				this.page.current = this.page.current + 1
				this.getData()
			},
			getData(){
				let url='/api/work-order/list'
				this.common.get(url,{
					status:this.status,
					pageNo:this.page.current
				},(res)=>{
					if(res.code!=1){
						this.common.showError(res.msg)
						return
					}
					let datas = this.page.records.concat(res.data.records);
					this.page.current = res.data.current
					this.page.pages = res.data.pages
					this.page.records = datas
					
				})
			},
			detail(d){
				let name = d.deviceName + '-' +d.waringName
				uni.navigateTo({
					url: '/pages/emergency/detail?id='+d.id+'&name='+name
				});
			},
		}
	}
</script>

<style>
	.scroll-view{
		height: calc(100vh - 120px);
		padding-bottom: 10px;
	}
	.tab-view>view{
		width: calc((100% - 40px) / 2);
	}
	.data-item-deal{
		text-align: right;
	}
	.deviceName{
		background: #15203c;
		border-radius: 3.33px;
		font-weight: bold;
		color: #ffffff;
		color: #ffffff;
		height: 30px;
		line-height: 30px;
		border-radius: 6.67px;
		box-shadow: 0px 3.33px 5px 0px rgba(3, 17, 45, 0.27);
		font-size: 14px;
	}
	.data-item>view{
		margin-top: 10px;
		padding-left: 10px;
	}
</style>
